<template>
	<view class="container yticon">
		<view class="top-bg">
			<!-- 	<view class="cu-avatar margin-top xl round border" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg);"></view>
			<view class="name margin-top">
				测试小员工
			</view> -->
			<open-data class="cu-avatar margin-top xl round border" type="userAvatarUrl" style="clip-path: circle(49% at center);"></open-data>
			<view class="name margin-top">
				<open-data type="userNickName"></open-data>
			</view>
		</view>

		<view style="width: 100vw;">
			<!-- 列表 -->
			<view class="cu-list menu sm-border margin-top">
				<view class="cu-item arrow" v-for="(item,index) in dataList" :key="index" @click="clickAddInfo(item)">
					<view class="content">
						<image :src="item.icon" class="png" mode="aspectFit"></image>
						<text class="text-grey">{{item.title}}</text>
					</view>
					<view class="action">
						<text class="text-grey text-sm">
							{{item.sizeTitle}}
						</text>
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				dataList: [{
						id: 1,
						title: '获取手机',
						sizeTitle: uni.getStorageSync('userInfo').phone || '',
						icon: '../../static/user/shouji.png'
					},
					{
						id: 2,
						title: '孕产资料',
						sizeTitle: '孕40周+0天',
						icon: '../../static/user/yunchan.png'
					},
					{
						id: 3,
						title: '我的报告',
						sizeTitle: '',
						icon: '../../static/user/baogao.png'
					},
					{
						id: 4,
						title: '我的订单',
						sizeTitle: '',
						icon: '../../static/user/dingdan.png'
					},
					{
						id: 5,
						title: '我的预约',
						sizeTitle: '',
						icon: '../../static/user/yuyue.png'
					},
					{
						id: 6,
						title: '我的病历',
						sizeTitle: '',
						icon: '../../static/user/bingli.png'
					},
					{
						id: 8,
						title: '意见反馈',
						sizeTitle: '',
						icon: '../../static/user/yijian.png'
					},
					{
						id: 9,
						title: '版本更新',
						sizeTitle: 'V3.11.1.1',
						icon: '../../static/user/banben.png'
					}
				],
				infoType: 2,
			};
		},
		onShow() {
			// 怀孕
			let days = uni.getStorageSync('cardInfo').days || 0
			let weeks = uni.getStorageSync('cardInfo').weeks || 0
			let dueDay = uni.getStorageSync('cardInfo').dueDay || 0
			// 以出生
			let years = uni.getStorageSync('cardInfo').years || 0
			let month = uni.getStorageSync('cardInfo').month || 0
			let birthDays = uni.getStorageSync('cardInfo').birthDays || 0
			this.dataList[0].sizeTitle = uni.getStorageSync('userInfo').phone || ''
			if (uni.getStorageSync('userInfo') && uni.getStorageSync('userInfo').userStatus.code == 'EXPECTANT') {
				this.dataList[1].sizeTitle = '孕' + weeks + '周' + days + '天'
				this.infoType = 1
			} else if (uni.getStorageSync('userInfo') && uni.getStorageSync('userInfo').userStatus.code == 'BABY') {
				this.dataList[1].sizeTitle = month + '个月' + birthDays + '天'
				this.infoType = 0
			}
		},
		methods: {
			clickAddInfo(v) {
				if (v.id == 1) {
					uni.navigateTo({
						url: './updatePhone'
					})
				} else if (v.id == 2) {
					uni.navigateTo({
						url: '../../pages/index/addInfo/index?type=' + this.infoType
					})
				}
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #f5f5f5;
		height: 100%;
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.container {
		display: flex;
		align-items: center;
		flex-direction: column;
		position: fixed;
		width: 101%;
		height: 101vh;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.top-bg {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 28vh;
		background-color: #fff;
		z-index: -2;
		padding-top: 4.5vh;
		padding-bottom: 10px;

		.border {
			border: 1px #fff solid;
		}

		.xl {
			width: 160rpx;
			height: 160rpx;
		}

		.name {
			.flex;
			width: 100%;
		}
	}

	.top-bg::after {
		content: '';
		width: 117%;
		position: absolute;
		z-index: -1;
		left: -8%;
		overflow-x: hidden;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		top: -15vh;
		height: 28vh;
		background: #276af3;
	}

	.menu {
		overflow: hidden !important;
	}

	.cu-list {
		width: 100%;

		.cu-item {
			min-height: 120rpx !important;

			.text-grey {
				color: #7c7c7c;
			}
		}

		// .cu-item:nth-child(2),.cu-item:nth-child(9) {
		// 	margin-bottom: 10px;
		// }


		.arrow:before {
			color: #adadad !important;
		}



	}
</style>
